<template>
  <div class="hello">
    <div style="text-align:center;">
        <img src="/api/qr/qr?text=生成二维码">
    </div>
    <div class="hello2">你好！{{$store.state.username}}，欢迎登录&nbsp;
        <a @click="cancellation" class="el-button el-button--text el-button--primary">注销</a>
         <router-link class="el-button el-button--text el-button--primary" to="/CommodityPool">
                前往商品池
        </router-link>
    </div>
    <div class="butondiv">
        <el-input class="common" v-model="username" placeholder="姓名" style="width:150px;"></el-input>
        <!-- 创建时间 -->
        <el-date-picker class="common" v-model="datevalue" type="daterange" align="left" placeholder="请选择创建时间" :picker-options="pickerOptions2"></el-date-picker>
        <el-button style="margin-bottom:10px;float: left;margin-top: 5px;" type="primary"
        size="small" icon="search" @click="getUser()">搜索</el-button>
    </div>
    <el-table :data="users" stripe style="width: 100%">
        <el-table-column prop="pic" label="图片" width="100">
            <template slot-scope="scope">
                <img :src="scope.row.pic" style="width:100%;height:100%;">
            </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="create_time" label="日期"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="delUser(scope.row)" v-if="scope.row.username != $store.state.username">删除</el-button>
                <el-button type="primary" size="small" @click="updetaUser(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        style="text-align: right;padding-right: 30px;padding-top: 20px;"
        @current-change="pageonesize"
        :current-page="pagefirst"
        :page-sizes="[2]"
        layout="total, sizes, prev, pager, next"
        background
        :total="Number(numcontn)">
    </el-pagination>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px" class="demo-ruleForm">
            <el-form-item label="名称" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="updetaUser2('ruleForm')">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      pickerOptions2: {
        //创建时间
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "前天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      datevalue: "",
      username: "",
      pagefirst: 1, //分页初始
      numcontn: "", //总条数
      users: [],
      dialogVisible: false,
      userRow: "",
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入您的名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入您的密码", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    if (!this.$store.state.username) {
      this.$router.push({
        path: "/login"
      });
      this.$store.dispatch("UserLogout");
    }
  },
  methods: {
    updetaUser2(formName) {
      let _that = this;
      let now = new Date();
      now = now.getTime();
      let params = {};
      params["username"] = _that.ruleForm.username;
      params["password"] = _that.ruleForm.password;
      params["create_time"] = now;
      params["id"] = _that.userRow._id;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$ajax.post("/api/user/updetaUser", params).then(function(res) {
            if (res.data.code == 200) {
              _that.$message.success(res.data.obj);
              _that.dialogVisible = false;
              _that.getUser();
              _that.ruleForm.username = "";
              _that.ruleForm.password = "";
            } else {
              _that.$message.warning(res.data.obj);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    updetaUser(row) {
      this.dialogVisible = true;
      this.userRow = row;
      this.ruleForm.username = row.username;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    delUser(row) {
      let _that = this;
      let params = {};
      params["username"] = row.username;
      this.$ajax.post("/api/user/delUser", params).then(function(res) {
        if (res.data.code == 200) {
          _that.$message.success(res.data.obj);
          _that.getUser();
        } else {
          _that.$message.warning(res.data.obj);
        }
      });
    },
    getNowFormatDate(create_time) {
      let date = new Date(create_time);
      let seperator1 = "-";
      let seperator2 = ":";
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        date.getHours() +
        seperator2 +
        date.getMinutes() +
        seperator2 +
        date.getSeconds();
      return currentdate;
    },
    pageonesize(val) {
      let _that = this;
      // 时间
      if (_that.datevalue == "" || _that.datevalue == undefined) {
        _that.datevalue = null;
      } else {
        if (_that.datevalue[0] == null || _that.datevalue[1] == null) {
          _that.datevalue = null;
        } else {
          let date1 = _that.datevalue[0];
          let date2 = _that.datevalue[1];
          var createdat =
            date1.getFullYear() +
            "-" +
            (date1.getMonth() + 1) +
            "-" +
            date1.getDate(); //开始时间
          var createend =
            date2.getFullYear() +
            "-" +
            (date2.getMonth() + 1) +
            "-" +
            date2.getDate(); //结束时间
        }
      }
      if (createdat == undefined) {
        createdat = "";
      }
      if (createend == undefined) {
        createend = "";
      }
      let params = {};
      params["username"] = _that.username;
      params["startTime"] = createdat;
      params["endTime"] = createend;
      params["page"] = val;
      params["pageSize"] = 2;
      this.$ajax.post("/api/user/getUser", params).then(function(res) {
        if (res.data.code == 200) {
          _that.users = res.data.obj.list;
          _that.numcontn = res.data.obj.total;
          for (let i = 0; i < _that.users.length; i++) {
            _that.users[i].create_time = _that.getNowFormatDate(
              _that.users[i].create_time
            );
          }
        } else {
          _that.users = [];
        }
      });
    },
    getUser() {
      //搜索
      this.pageonesize(1);
    },
    cancellation() {
      this.$router.push({
        path: "/login"
      });
      this.$store.dispatch("UserLogout");
    }
  },
  mounted() {
    this.getUser();
  }
};
</script>

<style lang="scss" scoped type="text/css">
.butondiv {
  float: left;
  width: 100%;
  .common {
    width: 250px;
    margin-right: 5px;
    margin-bottom: 10px;
    float: left;
  }
}
.hello {
  .hello2 {
    text-align: center;
  }
}
</style>
